<template>
  <div class="wx-payment-info">
    <h3 v-if="showTitle">{{ title }}</h3>
    
    <!-- Payment Information -->
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="info-item">
          <span class="label">交易ID：</span>
          <span>{{ payment.wx_transaction_id || '-' }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-item">
          <span class="label">支付时间：</span>
          <span>{{ formatDate(payment.wx_pay_time) }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-item">
          <span class="label">支付状态：</span>
          <span>
            <el-tag v-if="payment.wx_pay_status === 'not_paid'" type="info">未支付</el-tag>
            <el-tag v-else-if="payment.wx_pay_status === 'paid'" type="success">已支付</el-tag>
            <el-tag v-else-if="payment.wx_pay_status === 'refund_requested'" type="warning">退款申请中</el-tag>
            <el-tag v-else-if="payment.wx_pay_status === 'refunded'" type="danger">已退款</el-tag>
            <span v-else>-</span>
          </span>
        </div>
      </el-col>
    </el-row>
    
    <!-- Refund Information (if applicable) -->
    <el-row v-if="payment.wx_pay_status === 'refunded' || payment.wx_pay_status === 'refund_requested'" :gutter="20">
      <el-col :span="8">
        <div class="info-item">
          <span class="label">退款ID：</span>
          <span>{{ payment.wx_refund_id || '-' }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-item">
          <span class="label">退款时间：</span>
          <span>{{ formatDate(payment.wx_refund_time) }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-item">
          <span class="label">退款金额：</span>
          <span>¥{{ payment.wx_refund_amount || 0 }}</span>
        </div>
      </el-col>
    </el-row>
    
    <!-- Action Buttons -->
    <div v-if="showActions" class="action-buttons">
      <el-button 
        v-if="payment.status === 1 && payment.payment_type === 0 && payment.wx_pay_status === 'paid'" 
        type="warning" 
        size="small"
        @click="$emit('refund', payment)"
      >
        申请退款
      </el-button>
      <el-button 
        v-if="payment.payment_type === 0 && payment.wx_pay_status === 'paid'" 
        type="info" 
        size="small"
        @click="$emit('query-payment', payment)"
      >
        查询支付状态
      </el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils';

export default {
  name: 'WxPaymentInfo',
  props: {
    payment: {
      type: Object,
      required: true
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '微信支付信息'
    },
    showActions: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return '-';
      return formatDate(date);
    }
  }
};
</script>

<style scoped>
.wx-payment-info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  color: #606266;
  margin-right: 5px;
}

.action-buttons {
  margin-top: 15px;
}
</style>
